import React from "react";
import Admin from "../../layout/Admin";
import CompanyModel from "../../model/company";
import {Button, Form, Input, Modal, Upload} from "antd";
import {formLayout, formTailLayout, getBase64} from "../quotation/quotation";
import {UploadOutlined} from "@ant-design/icons";
import Info from "../../service/info";
const log = console.log.bind(console)

class Company extends React.Component {
    constructor(props) {
        super(props)
        this.model = new CompanyModel()
        this.state = {
            src: '',
            img: [],
            modal: {
                preview: false,
                previewImage: null,
            }
        }
    }

    componentDidMount() {
        this.detail()
    }

    detail = () => {
        this.model
            .detail()
            .then(res => {
                const data = res.data
                if (data.code === 0) {
                    const detail = data.data
                    const values = JSON.parse(detail.Value)
                    log(values)
                    this.addForm && this.addForm.setFieldsValue(values)
                    this.setState({
                        src: detail.Imgs[0],
                    })
                }
            })
    }

    uploadInputProps = (name) => {

        const fileList = this.state[name]

        return {

            onRemove: file => {
                this.setState(state => {
                    const index = state[name].indexOf(file);
                    const newFileList = state[name].slice();
                    newFileList.splice(index, 1);
                    return {
                        [name]: newFileList,
                    }
                })
            },

            beforeUpload: () => false,

            onChange: ({fileList,}) => {
                this.setState({
                    [name]: fileList,
                })
            },

            onPreview: async (file) => {
                if (!file.url && !file.preview) {
                    file.preview = await getBase64(file.originFileObj);
                }

                this.setState({
                    previewImage: file.url || file.preview,
                    previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
                }, () => this.callModal('preview'));
            },

            fileList,
        }

    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    onAdd = (values) => {
        const Value = JSON.stringify(values)

        const fm = new FormData()
        fm.append('Value', Value)

        if (this.state.img.length > 0) {
            const img = this.state.img[0]
            const name = img.name
            const file = img.originFileObj
            fm.append('Imgs', JSON.stringify([name,]))
            fm.append(name, file)
        }

        this.model
            .add(fm)
            .then(res => {
                const data = res.data
                log(data)
                if (data.code === 0) {
                    Info.success('添加/修改成功')
                    this.detail()
                }
            })
    }

    render() {
        return (
            <>
                <Modal
                    visible={this.state.modal.preview}
                    title={this.state.previewTitle}
                    footer={null}
                    onCancel={() => this.cancelModal('preview')}
                >
                    <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                </Modal>
                <Admin>
                    <div className='list-container'>
                        <Form
                            {...formLayout}
                            name='add'
                            ref={el => this.addForm = el}
                            onFinish={this.onAdd}
                        >
                            <Form.Item
                                label="现在宣传图"
                            >
                                {this.state.src.length === 0 ? '暂无公司图片' : <img src={this.state.src} alt='' style={{width: 300,}}/>}
                            </Form.Item>
                            <Form.Item
                                label="上传公司简介图片"
                            >
                                <Upload
                                    listType="picture-card"
                                    fileList={this.state.imgs}
                                    {...this.uploadInputProps('img')}
                                    multiple={false}
                                >
                                    <Button icon={<UploadOutlined />}>上传轮播图</Button>
                                </Upload>
                            </Form.Item>

                            {[
                                ['brief', '公司简介',],
                                ['serviceNumber', '客服电话'],
                                ['email', '邮箱'],
                                ['gongAnBei', '公安备'],
                                ['ICP', 'ICP备'],
                                ['todayVisit', '今日访问'],
                                ['totalVisit', '总访问'],
                                ['monthVisit', '月访问'],
                            ].map(([name, label], index) => {
                                return <Form.Item
                                    label={label}
                                    name={name}
                                    key={index}
                                >
                                    <Input placeholder={'请输入' + label}/>
                                </Form.Item>
                            })}

                            <Form.Item {...formTailLayout}>

                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>

                            </Form.Item>
                        </Form>
                    </div>
                </Admin>
            </>
        )
    }
}

export default Company